<template>
  <div>
    <div class="recommend-title">
      周末去哪儿
    </div>
    <ul>
      <router-link tag="li"
                   to="/aa"
                   v-for="(item) in recommendList"
                   :key="item.id"
                   class="list-item">
        <div class="item-img">
          <img :src="item.imgUrl"
               alt="">
        </div>
        <div class="item-info">
          <div class="info-title">{{item.title}}</div>
          <div class="info-comment">{{item.comment}}</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  data () {
    return {
      recommendList: [
        {
          id: '001',
          imgUrl: '//imgs.qunarzz.com/p/p32/1504/46/5a0a9ac552e26d.jpg_256x160_a63acde6.jpg',
          title: '橘子洲',
          comment: '你好世界'
        },
        {
          id: '002',
          imgUrl: '//imgs.qunarzz.com/p/p70/1809/e7/4941057a6aae702.jpg_256x160_9fee6ccb.jpg',
          title: '橘子洲',
          comment: '你好世界'
        },
        {
          id: '003',
          imgUrl: '//imgs.qunarzz.com/p/p70/1809/e7/4941057a6aae702.jpg_256x160_9fee6ccb.jpg',
          title: '橘子洲',
          comment: '你好世界'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl';
@import '~@/assets/styles/mixins.styl';

div {
  box-sizing: border-box;
}

.recommend-title {
  padding: 0 0.2rem;
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.28rem;
  background-color: #eee;
}

.list-item {
  // width: 100%;
  // height: 2.4rem;
  .item-img {
    width: 100%;
    height: 0;
    padding-bottom: 62.1%;

    // background-color: green;
    img {
      width: 100%;
    }
  }

  .item-info {
    padding: 0.14rem 0.2rem 0.2rem;

      // background-color: brown;
      .info-title {
        width: 100%;
        height: 0.48rem;
        line-height: 0.48rem;
        font-size: 0.28rem;
        ellipsis();
      }

      .info-comment {
        width: 100%;
        height: 0.42rem;
        line-height: 0.42rem;
        font-size: 0.28rem;
        color: #616161
        ellipsis();
      }
  }
}
</style>
